<template>
	<view>
		<view>
			<view style="overflow-x: auto;">
				<view class="choice-bar">
					<view class="nav-choice" :class="isActive[index]" v-for="(value,index) in navChoice" :key="index"
						@click="changeActive(index)">{{value}}</view>
				</view>
			</view>
			<aircondition-record v-for="(item,index) in recordList" :key="index" :company="item.company"
				:building="item.building" :time="item.time" :state="item.state" @getClick="toDeliverHouseDetails"></aircondition-record>
		</view>
		<uni-popup ref="popup" type="center">
			<view class="message-view">
				<uni-title align="center" type="h1" title="交房表单"></uni-title>
				<uni-forms ref="form" :modelValue="formData">
					<uni-forms-item label="房源编号:" name="name">
						<uni-easyinput type="text" v-model="formData.houseCode" placeholder="请输入房源编号" />
					</uni-forms-item>
					<uni-forms-item label="客户账号:" name="name">
						<uni-easyinput type="text" v-model="formData.userInfo" placeholder="请输入客户账号" />
					</uni-forms-item>
					<uni-forms-item label="客户姓名:" name="name"></uni-forms-item>
					<uni-forms-item label="联系方式:" name="name"></uni-forms-item>
					<uni-forms-item label="公司信息:" name="name"></uni-forms-item>
				</uni-forms>
				<view>
					<button class="bottom-button-confirm" type="primary" @click="confirm">
						申请交房
					</button>
					<button class="bottom-button-confirm" type="warn"  @click="close">
						取消
					</button>
				</view>
			</view>
		</uni-popup>
		<view class="button-mix">
			<button type="primary" @click="open">
				新增交房
			</button>
		</view>
		<uni-popup ref="popupMes" type="center">
			<uni-popup-message type="success" message="已提交" :duration="0"></uni-popup-message>
		</uni-popup>
		<!-- <u-tabbar v-model="current" :list="list" :before-switch="clickTabbar"></u-tabbar> -->
	</view>
</template>

<script>
	import myHouseCard from '../../components/myHouseCard';
	import {
		getHouseTag,
		ROUTER_OBJ,
		uniNavigate,
		uniShowToast,
		getRouterParam,
		MY_LOCATION
	} from '../../util/misc';
	export default{
		data() {
			return {
				chooseState: '',
				navChoice: ['待处理','已处理','全部工单'],
				isActive: ['active-choice','nav-choice','nav-choice','nav-choice','nav-choice','nav-choice'],
				// isActive: ['active-choice','nav-choice','nav-choice'],
				activeIndex: 0,
				recordList:[
					{'company':'福建海峡科技有限公司','building':'中青大厦',
						'time':'2021-09-01 12:11:11','state':'待受理'},
					{'company':'福建天源科技有限公司','building':'中青大厦',
						'time':'2021-09-01 12:11:11','state':'待受理'},
					{'company':'赛尔科技有限公司','building':'中青大厦',
						'time':'2021-09-01 12:11:11','state':'待受理'}
				],
				current: 0,
				formData: {
				                houseCode: '',
				                userInfo: ''
				            },
			}
		},
		methods: {
			toDeliverHouseDetails() {
				let obj = {"showSellPrice": false, id: 1};
				obj = JSON.stringify(obj);
				uniNavigate(`/deliverHouse/houseDetails?obj=${obj}`);
			},
			changeActive(e) {
				if(e!==this.activeIndex){
					let tmp = [...this.isActive]
					tmp[e] = 'active-choice'
					tmp[this.activeIndex] = 'nav-choice'
					this.activeIndex = e
					this.isActive = tmp
					this.choosedState = this.navChoice[this.activeIndex]
				}
				for(let i=0; i<this.recordList.length; i++){
					this.recordList[i].state = this.choosedState
				}
			},
			clickTabbar(index) {
				switch(index){
					case 0:
						console.log('首页')
						uni.redirectTo({
							url:'/pages/home/home'
						})
						return true
						break
					case 1:
						console.log('楼层管家')
						return true
						break
					case 2:
						console.log('发现')
						return true
						break
					case 3:
						console.log('消息')
						uni.redirectTo({
							url:'/pages/systemAnnoucement/list/list'
						})
						return true
						break
					case 4:
						console.log('我的')
						uni.navigateTo({
							url:'/pages/myPage/myPage'
						})
						return true
						break
				}
			},
			goDetails(item) {
				if (this.offShelf) {
					uniShowToast('该房源已下架, 请您重新选择其他房源', false);
					return;
				}
				let obj = {"showSellPrice": false, id: item.id};			
				if (
					(this.tagName && this.tagName.indexOf('售') !== -1) ||
					(this.item && this.item.house_sell_type === 2)
				) {
					// 详情页中应该显示总售价
					uniSetStorageSync(ROUTER_OBJ, {
						...item,
						showSellPrice: true,
						displayBuildMode: false,
					});
					obj.showSellPrice = true;
				} else {
					uniSetStorageSync(ROUTER_OBJ, {
						...item,
						showSellPrice: false,
						displayBuildMode: false,
					});
					obj.showSellPrice = false;
				}
				obj = JSON.stringify(obj);
				// 决定是去房源详情还是盘源详情
				if (this.displayBuildMode) {
					uniNavigate(`/displayDetails/displayBuildDetails?obj=${obj}`);
				} else {
					uniNavigate(`/displayDetails/displayDetails?obj=${obj}`);
				}
			},
			open(){
			  // 通过组件定义的ref调用uni-popup方法 ,如果传入参数 ，type 属性将失效 ，仅支持 ['top','left','bottom','right','center']
			  this.$nextTick(() =>{this.$refs.popup.open('top')});
			},
			close() {
				// TODO 做一些其他的事情，before-close 为true的情况下，手动执行 close 才会关闭对话框
				// ...
				this.$refs.popup.close()
			},
			/**
			 * 点击确认按钮触发
			 * @param {Object} done
			 * @param {Object} value
			 */
			confirm(value) {
				// 输入框的值
				// console.log(value)
				// TODO 做一些其他的事情，手动执行 close 才会关闭对话框
				// ...
				this.$refs.popupMes.open()
				this.$refs.popup.close()
				// uni.navigateBack()
			},
		},
	}
</script>

<style>
	page{
		background-color: #ffffff
	}
	.nav-choice{
		height: 100rpx;
		width: 250rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 30rpx;
		border-bottom: solid 5rpx #F1F1F1;
	}
	.choice-bar{
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content:flex-start;
		width: 900rpx;
		color: #808080;
	}
	.active-choice{
		height: 100rpx;
		width: 250rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 30rpx;
		font-weight:600;
		color: #DD524D;
		border-bottom: solid 5rpx #DD524D;
	}
	::-webkit-scrollbar {
		display:none;
		width:0;
		height:0;
		color:transparent;
	}
	.button-mix {
	  text-align: center;
	  left: 0;
	  right: 0;
	  position: fixed;
	  bottom: 15rpx;
	  text-decoration: underline;
	  font-weight: 400;
	  color: cornflowerblue;
	}
	.message-view {
	  border-radius: 10px;
	  width:750;
	  height:900;
	  background-color: #ffffff;
	}
</style>
